﻿* {
    padding: 0;
    margin: 0;
}
html {
  	background-color: #f2f2f2;
  	color: #666;
      }
  #fullscreen_bg {
  	position: fixed;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	background-size: cover;
  	background-position: 50% 50%;
  	opacity: 1;
  	transition: opacity .25s ease-out;
  	z-index: -1;
  }
  
  #footer {
  	position: fixed;
  	bottom: 0;
  	right: 0;
  	padding: 17px;
  }
  
  #footer p {
  	color: snow;
  	font-style: italic;
  	text-shadow: 0 -1px 0 #374683;
  	font-weight: bolder;
  }
#loading{
 position: fixed;
top: 22%;
left: 50%;
        margin-left: -40px;
}
  a {
  	text-decoration: none;
  }
  
  ul#menu {
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 60px;
  	height: 100%;
  	list-style: none;
  	background-image: url("");
  	box-shadow: 1px 0 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  li.menuitem {
  	width: 60px;
  	text-align: center;
  	height: 60px;
  }
  
  #main {
  	width: 620px;
  	height: 240px;
  	position: fixed;
  	top: 80%;
  	left: 44%;
  	margin-left: -160px;
  	margin-top: -120px;
  }
  
  #main h1 {
  	font-size: 5em;
  	text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25);
  	font-family: 微软雅黑;
  	color: steelblue;
  	border-radius: 100px;
  	font-weight: bold;
  }
  
  #main p {
  	font-size: x-large;
  	font-style: italic;
  	margin-top: 20px;
  	margin-left: 70px;
  	text-shadow: 0 -1px 0 #374683;
  	font-weight: bolder;
  	color: whitesmoke;
  }
  
  #content {
  	/*background-image:url("background_overlay.png");*/
  	background-color: rgba(250, 250, 250, 0.6);
  	width: auto;
  	margin-left: 60px;
  }
  
  i.fa {
  	text-shadow: rgba(0, 0, 0, 0.5) -1px 0, rgba(0, 0, 0, 0.3) 0 -1px, rgba(255, 255, 255, 0.5) 0 1px, rgba(0, 0, 0, 0.3) -1px -2px;
  	color: snow;
  	margin-top: 5px;
  }
  
  @media (max-width: 440px) {
  	/* main320px + menu60px x 2 = 440px e.g. iphone4 */
      
    /*ul#menu {
    z-index: -1;
}*/
div#phonemenu {
    display: block !important;
}
  	#fullscreen_bg {
  		background-image: url("02.jpg?size=640x480");
  	}
  	#main {
  		top: 0;
  		margin-top: 0;
  	}
  	#content {
  		margin-left: 0;
  	}
  	
      
      ul#menu {
  		top: 160px;
  		left: 50%;
  		margin-left: -160px;
  		width: 320px;
  		height: 240px;
  	}
  	li.menuitem {
  		float: left;
  		padding: 10px;
  	}
      
      
  }
  
  @media (min-width: 441px) and (max-width: 1366px) {
  	#fullscreen_bg {
  		background-image: url("02.jpg?size=1366x768");
  	}
  }
  
  @media (min-width: 1367px) {
  	#fullscreen_bg {
  		background-image: url("02.jpg?size=1920x1080");
  	}
  }

/* Sweep To Right */
.menuitem {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.menuitem:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: silver;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.menuitem:hover, .menuitem:focus, .menuitem:active {
  color: skyblue;
}
.menuitem:hover:before, .menuitem:focus:before, .menuitem:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}





div#phonemenu {
    position: fixed;
    bottom: 0;
    padding: 17px;
    display: none;
    z-index: 1;
}





/*LOGO动画*/


                
                
                
                
                #main {
					animation-name: flipInX;
					animation-delay: 0s;
					animation-duration: 3s;
					animation-fill-mode: both;
					animation-timing-function: ease;
                }
                
                
                @keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: scale(5);
        -webkit-transform: scale(5);
        margin-top: 120px;
        opacity: 0;
    }
    
    50% {
        transform: perspective(400px) rotateX(45deg);
        -webkit-transform: perspective(400px) rotateX(45deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(0deg);
        -webkit-transform: perspective(400px) rotateX(0deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: scale(1);
        -webkit-transform: scale(1);
        margin-top: -120px;
        opacity: 1;
    }
}